<template>
  <div class="content">
    <heading grade="1">学员管理<small>5人已报名</small></heading>
    <div class="student-table">
      <!--<div class="period-number">
                <span class="status-btn status-btn-text"
                      v-for="(item,index) in periodDate.periodList"
                      v-bind:class="{active:index == periodIndex}" @click="periodIndex = index">
                    {{item.period}}</span>
      </div>-->
      <el-radio-group v-model="stateValue" class="checker-radio">
        <el-radio v-for="item in periodDate.periodList" :label="item.value" :key="item.value">{{item.label}}</el-radio>
      </el-radio-group>
      <el-table :data="tableData">
        <el-table-column
          prop="student"
          label="学员"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="lesson"
          label="课时"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="参与状态"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label=""
        >
          <template scope="scope">
            <a v-bind:href="'#/train/detail/'+scope.row.id">学员详情</a>
            <a href="">查看订单</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    mounted () {
      console.log(this.$route, 1111)
    },
    data () {
      return {
        stateValue: '1',
        periodDate: {
          periodList: [
            {
              label: '一期',
              value: '1'
            },
            {
              label: '二期',
              value: '2'
            },
            {
              label: '三期',
              value: '3'
            }
          ]
        },
        tableData: [
          {
            id: 224,
            student: '张三',
            sex: '男',
            age: 14,
            lesson: '10',
            status: '已报名',
            phone: 15916351602
          },
          {
            id: 762,
            student: '李四',
            sex: '女',
            age: 22,
            lesson: '10',
            status: '已报名',
            phone: 15916351602
          },
          {
            id: 224,
            student: '张三',
            sex: '男',
            age: 14,
            lesson: '10',
            status: '已报名',
            phone: 15916351602
          },
          {
            id: 762,
            student: '李四',
            sex: '女',
            age: 22,
            lesson: '10',
            status: '已报名',
            phone: 15916351602
          },
          {
            id: 224,
            student: '张三',
            sex: '男',
            age: 14,
            lesson: '10',
            status: '已报名',
            phone: 15916351602
          },
          {
            id: 762,
            student: '李四',
            sex: '女',
            age: 22,
            lesson: '10',
            status: '已报名',
            phone: 15916351602
          }
        ]
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  
  .student-table {
    margin-top: 30px;
  
  .active {
    background: #00bb90;
    color: white;
  }

  .el-table {
  tr:nth-child(odd) {
    background: #f5f5f5;
  }
  &
  :after {
    width: 0px;
  }
  &
  :before {
    width: 0px;
    height: 0px;
  }
  td {
    border: 0px;
    height: 60px;
  }
  tr {
    border-bottom: 1px solid #f3f3f3;
  }
  tr:last-of-type {
    border-bottom: 0px;
  }
  &
  ,
  th.is-leaf {
    border: 0px;
  }
  th {
    height: 55px;
  }
  th, .el-table__header-wrapper thead div {
    background: white;
  }
  }
  .cell {
  a {
    color: #3c83df;
    text-decoration: none;
    margin-left: 25px;
  &
  :hover {
    text-decoration: underline;
  }
  }
  }
  }
</style>
